<script setup>
import router from "../../../router/index.js";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {Back} from "@element-plus/icons-vue";
import {selectPolicy} from "../../../http/rabbitmq/policy.js";

const route = useRoute()

const policyDetails = ref({})

const goBack = () => {
  router.push({path: '/policy'})
}

function handlePolicySelect() {
  selectPolicy(route.query.vhost, route.query.name).then(response => {
    policyDetails.value = response
  })
}

onMounted(() => {
  handlePolicySelect()
})

</script>

<template>
  <el-button @click="goBack" text style="width: 50px">
    <el-icon>
      <Back/>
    </el-icon>
    Back
  </el-button>
  <div style="width: 100%; height: calc(100% - 60px); overflow: auto">
    <el-descriptions column="1" border>
      <el-descriptions-item label="vhost">{{ policyDetails.vhost }}</el-descriptions-item>
      <el-descriptions-item label="name">{{ policyDetails.name }}</el-descriptions-item>
      <el-descriptions-item label="Pattern">{{ policyDetails.pattern }}</el-descriptions-item>
      <el-descriptions-item label="Apply to">{{ policyDetails['apply-to'] }}</el-descriptions-item>
      <el-descriptions-item label="Definition">{{ policyDetails.definition }}</el-descriptions-item>
      <el-descriptions-item label="Priority">{{ policyDetails.priority }}</el-descriptions-item>
    </el-descriptions>
  </div>

</template>

<style scoped>

</style>